Upload

A jQuery plugin for simple drag and drop uploads.

Demo

Basic

Complete
Queued

Use

Main

upload.js
upload.css

Dependencies

core.js

Basic

Upload will create a simple 'drop zone' for file uploads:

$(".target").upload({
    action: "upload.php"
});
<div class="target"></div>

Uploads

Upload does not store or manipulate uploaded files on the server, it simply facilitates the asynchronous upload process from the front end.

Options

Set instance options by passing a valid object at initialization, or to the public defaults method. Custom options for a specific instance can also be set by attaching a data-upload-options attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.

Name Type Default Description
action string   Where to submit uploads
label string 'Drag and drop files or click to select' Drop target text
leave string 'You have uploads pending, are you sure you want to leave this page?' Before leave message
maxQueue int 2 Number of files to simultaneously upload
maxSize int 5242880 Max file size allowed
postData object   Extra data to post with upload
postKey string 'file' Key to upload file as

Events

Events are triggered on the target instance's element, unless otherwise stated.

Event Description
complete All uploads are complete
filecomplete Specific upload complete
fileerror Specific upload error
filestart Specific upload starting
fileprogress Specific upload progress
start Uploads starting

Methods

Methods are publicly available to all active instances, unless otherwise stated.

defaults

Extends plugin default settings; effects instances created hereafter.

$.upload("defaults", { ... });

Parameters

Name Type Default Description
options object {} New plugin defaults

destroy

Removes plugin instance.

$(".target").upload("destroy");

CSS

Class Type Description
.fs-upload-element element Target elmement
.fs-upload element Base widget class
.fs-upload.fs-upload-dropping modifier Indicates dropping state
.fs-upload-input element Masked Input
.fs-upload-target element Drop target